<template>
  <view class="animated fadeIn faster page-bg page-container">
    <view class="nav py-2 nav-container">
      <view class="d-flex d-flex-item d-flex-middle mb-1 px-2">
        <view class="searchBox">
          <text class="iconfont icon-icon_sousuo first-child"></text>
          <input class="px-5 rounded30  font26  bg-fff" v-model="order_no" placeholder="搜索订单编号"
                 placeholder-class="colorhold"/>
          <text
              v-if="order_no"
              class="iconfont icon-jiufuqianbaoicon08 clear-icon color444"
              @click="clearSearch"></text>
        </view>
        <view class="px-2 color598dfc" style="width: 80rpx;" @click="onSearch">
          搜索
        </view>
      </view>

      <view class="d-flex d-flex-middle d-flex-center date-picker-container bg000 mt-2 p-1  colorfff">
        <text class="iconfont icon-icon_sousuo colorfff px-1"></text>
        <picker mode="date" @change="startDateChange">
          <text>{{ start_time || '开始时间' }}</text>
        </picker>
        <text class="colorfff px-1">~</text>
        <picker mode="date" @change="endDateChange">
          <text> {{ end_time || '结束时间' }}</text>
        </picker>
        <text v-if="start_time&& end_time" class="iconfont icon-jiufuqianbaoicon08 main-color ml-1"
              @click="dataCancel"></text>
      </view>


      <view class="d-flex tab-scroll_box px-2">
        <!-- 选项卡类别列表 -->
        <view class="tab-scroll_item d-flex-item" v-for=" (item,index) in tabList" :key="index"
              :class="{'active':isActiveList==item.id}" @click="chenkedList(item.id)">
          {{ item.name }}
        </view>
      </view>
    </view>

    <view class="scroll-container">
      <scroll-view
          refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          refresher-background="#f5f5f5"
          class="scroll-area"
          @scrolltolower="onScrollToLower"
          :scroll-with-animation="true"
          :scroll-y="true"
      >
        <view v-if="list.length > 0">
          <view class="nav_item bg-fff mx-2 p-2 mb-2 rounded10" v-for="(item,inde) in list" :key="inde+'c'">
            <view class="font30 pb-1 mb-2 line d-flex d-flex-between">
              <text>{{ item.time }}</text>
              <text v-if="item.player_order_status ==0" class="colorf00">等待打手接单</text>
              <text v-if="item.player_order_status ==1" class="colorf00">等待服务</text>
              <text v-if="item.player_order_status ==3" class="colorf00">等待老板确认</text>
              <text v-if="item.player_order_status ==4" class="color999">服务完成</text>
              <text v-if="item.player_order_status ==2" class="main-color">服务中</text>
              <text v-if="item.player_order_status ==5" class="colorf00">订单取消</text>
            </view>
            <view class="d-flex  ">
              <image :src="item.resource.icon || item.resource.voice_introduce" class="mr-2 img"></image>
              <view class="d-flex-item d-flex ">
                <view class="mb-1 d-flex-item">
                  <view class="font-bold font30 mt-1">{{ item.resource.name }}</view>
                  <!-- 		<view class="text-clamp-two font26 my-1 color999">
                    {{item.resource.name}}</view> -->
                </view>
                <view class="d-flex d-flex-column d-flex-item text-right">
                  <text class="colorf00 font40">
                    <text class="font22">￥</text>
                    {{ item.amount }}
                  </text>
                  <text class="color999 font22 ml-1-5">×1</text>
                </view>
              </view>
            </view>
            <view class="d-flex d-flex-between mt-3 line pb-2">
              <view class="d-flex d-flex-column mr-1">
                <text class="line-height50">订单编号</text>
                <text class="line-height50">游戏ID</text>
                <text class="line-height50">手机号码</text>
                <text class="line-height50">联系方式</text>
                <text class="line-height50">下单时间</text>
                <text class="line-height50">接单时间</text>
                <text class="line-height50">开始服务时间</text>
                <text class="line-height50">完成时间</text>
                <text class="line-height50">确认截止时间</text>
                <text class="line-height50">订单备注</text>
              </view>
              <view class="d-flex d-flex-column d-flex-item">
                <view class="d-flex d-flex-middle line-height50 d-flex-between">
                  <text class="mr-1 color999 font26">{{ formatField(item.order_no) }}</text>
                  <image style="width: 30rpx;height: 30rpx;"
                         src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/strike.png"
                         @click="copypw(item.order_no)">
                  </image>
                </view>
                <view class="d-flex d-flex-middle line-height50 d-flex-between">
                  <text class="mr-1 color999 font26">{{ formatField(item.game_name) }}</text>
                  <image style="width: 30rpx;height: 30rpx;"
                         src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/strike.png"
                         @click="copypw(item.game_name)">
                  </image>
                </view>
                <text class="color999 font26 line-height50">{{formatField(item.phone) }}</text>
                <view class="d-flex d-flex-middle line-height50 d-flex-between">
                  <text class="mr-1 color999 font26">{{formatField(item.wx) }}</text>
                  <image style="width: 30rpx;height: 30rpx;"
                         src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/strike.png"
                         @click="copypw(item.wx)">
                  </image>
                </view>
                <text class="color999 font26 line-height50">{{ formatField(item.created_at) }}</text>
                <text class="color999 font26 line-height50">{{ formatField(item.accept_time) }}</text>
                <text class="color999 font26 line-height50">{{ formatField(item.service_time) }}</text>
                <text class="color999 font26 line-height50">{{ formatField(item.complete_time) }}</text>
                <text class="color999 font26 line-height50">{{ formatField(item.confirmation_deadline) }}</text>
                <text class="color999 font26 ">{{ formatField(item.remark, '无备注') }}</text>
              </view>
            </view>
            <view class="d-flex py-2 d-flex-end d-flex-wrap">
              <!--              <view v-if="item.player_order_status != 4" class="btn px-3 py-1 rounded30 font26 " @click="goUrl(item)">完成服务</view>-->
              <view v-if="item.player_order_status == 1" class="btn px-3 py-1 rounded30 font26 "
                    @click="goUrl(item,item.player_order_status,'abnormal')">提交异常
              </view>
              <view v-if="item.player_order_status == 1" class="ml-2 btn px-3 py-1 rounded30 font26 wmBtnBg"
                    @click="goUrl(item,item.player_order_status)">开始服务
              </view>
              <view v-if="item.player_order_status == 2" class="ml-2 btn px-3 py-1 rounded30 font26 wmBtnBg"
                    @click="goUrl(item,item.player_order_status)">完成服务
              </view>
              <view v-if="item.player_order_status == 8" class="ml-2 btn px-3 py-1 rounded30 font26 wmBtnBg"
                    @click="goUrl(item,item.player_order_status)">取消异常
              </view>
            </view>
          </view>
        </view>

        <view class="load-more d-flex d-flex-center d-flex-column d-flex-middle py-4"
              v-if="loadingType >= 1 && list.length == 0">
          <image
              src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
              style="width: 198rpx;height: 128rpx;margin-top: 260rpx;"></image>
          <text class="empty-text">{{ loadingType === 1 ? '正在加载...' : '~ 暂无相关订单 ~' }}</text>
        </view>

        <view class="load-more d-flex d-flex-center d-flex-column d-flex-middle py-4"
              v-if="loadingType === 0">
          <text class="empty-text">正在加载更多...</text>
        </view>
        <view class="load-more d-flex d-flex-center d-flex-column d-flex-middle py-4"
              v-if="loadingType === 2 && list.length > 0">
          <text class="empty-text">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>


    <view v-if="isPopupVisible" class="popup-mask" @click="closeUploadPopup">
      <view class="upload-popup p-2 pb-2" @click.stop>
        <view class="popup-header px-2">
          <text class="popup-title">上传截图</text>
          <text class="popup-close" @click="closeUploadPopup">×</text>
        </view>
        <scroll-view class="popup-body" scroll-y>
          <view class="upload-area" @click="selectImage">
            <view v-if="selectedImage" class="image-preview">
              <image :src="selectedImage" class="preview-image" mode="aspectFit"></image>
              <text class="remove-image" @click.stop="removeImage">×</text>
            </view>
            <view v-else class="upload-placeholder">
              <text class="upload-icon">+</text>
              <text class="upload-text">点击选择图片</text>
            </view>
          </view>
          <view class="order-info mt-2" v-if="currentOrder">
            <text class="info-label">订单编号:</text>
            <text class="info-value">{{ currentOrder.order_no }}</text>
          </view>
          <view class="tips mt-2">
            <text v-if="player_order_status == 1" class="tips-text">提示：请上传和老板在同队伍的截图作为凭证</text>
            <text v-else class="tips-text">提示：请上传完成服务的截图作为凭证</text>

          </view>
        </scroll-view>

        <view class="popup-footer mt-2">
          <button class="btn-cancel" @click="closeUploadPopup">取消</button>
          <button class="btn-confirm ml-2" @click="submitScreenshot" :disabled="!selectedImage">
            {{ selectedImage ? '上传' : '请选择图片' }}
          </button>
        </view>
      </view>
    </view>

    <view v-if="isReasonModalVisible" class="popup-mask" @click="cancelReasonModal">
      <view class="reason-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">请输入异常原因</text>
        </view>
        <view class="modal-body">
      <textarea
          v-model="abnormalReason"
          placeholder="请输入异常原因"
          class="reason-input"
          maxlength="200"
      />
          <view class="char-count">{{ abnormalReason.length }}/200</view>
        </view>
        <view class="modal-footer">
          <button class="btn-cancel" @click="cancelReasonModal">取消</button>
          <button class="btn-confirm" @click="submitAbnormal">确定</button>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
import {
  payApi
} from '@/http/payApi';
import {fileApi} from '@/http/fileApi.js';
import {userApi} from '@/http/userApi.js';
import {
  mapState
} from "vuex"
import store from '@/store';

export default {
  data() {
    return {
      isActive: 2,
      index: 0,
      currentindex: 0,
      user_order_status: '',
      player_order_status: '',
      start_time: '',
      end_time: '',
      list: [],
      tabList: [
        {
          id: 1,
          name: '待服务',
        },
        {
          id: 2,
          name: '服务中',
        },
        {
          id: 3,
          name: '待确认',
        },
        {
          id: 4,
          name: '已完成',
        },
        {
          id: 8,
          name: '异常订单',
        },
      ],
      isActiveList: 1,
      order_no: '',
      currentDate: '',
      scrollViewHeight: '1120rpx',
      currentOrder: null, // 当前操作的订单
      imgList: [],
      refreshing: false, // 下拉刷新状态
      orderType: '',
      loadingType: 1,
      page: 1,
      isPopupVisible: false,
      isSubmitting: false,
      selectedImage: '',
      // 异常原因
      abnormalReason: '',
      isReasonModalVisible: false,
      currentAbnormalOrder: null,
    }
  },

  onLoad(option) {
    if (option.order_type) {
      this.isActive = Number(option.order_type)
      this.isActiveList = Number(option.player_order_status)
      this.player_order_status = Number(option.player_order_status)
      this.orderSee(this.isActive)
    } else {
      this.orderSee()
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
      userId: state => state.id,
	  online:state=> state.online
    })
  },
  methods: {
    async orderSee(order_type) {
      if (order_type == 0 || order_type == undefined) order_type = ''

      this.loadingType = 1

      try {
        let params = {
          page: this.page,
          order_type: order_type,
          user_order_status: this.user_order_status,
          player_order_status: this.player_order_status,
          start_time: this.start_time,
          end_time: this.end_time,
          order_no: this.order_no
        }
        let result = await payApi.getOrderSee(params)
        if (result.data) {
          // 如果是第一页，直接赋值；否则追加数据
          if (this.page === 1) {
            this.list = result.data
          } else {
            this.list = this.list.concat(result.data)
          }
        }
        // 根据返回数据长度判断是否还有更多数据
        if (result.data && result.data.length > 9) {  // 假设每页10条数据
          this.loadingType = 0  // 还有更多数据
        } else {
          this.loadingType = 2  // 没有更多数据了
        }
      } catch (error) {
        // 出错时如果列表为空，设置为无数据状态
        if (this.list.length === 0) {
          this.loadingType = 2
        }
        // 出错时页面减1，以便下次重新尝试加载
        if (this.page > 1) {
          this.page--;
        }
      }
    },

    chenkedList(id) {
      this.isActiveList = id
      if (id == -1) {
        this.user_order_status = ''
        this.player_order_status = ''
      } else {
        if (this.isActive == 1) {
          this.user_order_status = id
        }
        if (this.isActive == 2) {
          this.player_order_status = id
        }
      }

      this.page = 1
      this.list = []
      setTimeout(() => {
        this.orderSee(this.isActive)
      }, 500)
    },
    change(e) {
      const {
        current
      } = e.detail;
      this.currentindex = current;
    },
    copypw(item) {
      uni.setClipboardData({
        data: `${item}`,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },
    // 新增开始日期选择处理
    startDateChange(e) {
      this.start_time = e.detail.value;
      // 如果开始时间和结束时间都已选择，则自动查询
      if (this.start_time && this.end_time) {
        this.page = 1
        this.list = [] // 日期筛选时清空列表
        this.orderSee(this.isActive);
      }
    },
// 新增结束日期选择处理
    endDateChange(e) {
      this.end_time = e.detail.value;
      // 如果开始时间和结束时间都已选择，则自动查询
      if (this.start_time && this.end_time) {
        this.page = 1
        this.list = [] // 日期筛选时清空列表
        this.orderSee(this.isActive);
      }
    },
    dataCancel() {
      this.end_time = ''
      this.start_time = ''
      this.page = 1
      this.list = [] // 取消日期筛选时清空列表
      this.orderSee(this.isActive);
    },
    uploadScreenshot(order) {
      this.currentOrder = order;
      this.isPopupVisible = true;
      this.selectedImage = ''; // 清空之前选择的图片
      this.imgList = [];
    },

    // 关闭弹窗
    closeUploadPopup() {
      this.isPopupVisible = false;
      this.selectedImage = '';
      this.currentOrder = null;
      this.imgList = [];
    },
    // 选择图片方法
    selectImage() {
      if (this.selectedImage) return; // 如果已有图片，不重复选择
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // 限制文件大小（5MB）
          const fileSize = res.tempFiles[0].size;
          if (fileSize > 5 * 1024 * 1024) {
            uni.showToast({
              title: '图片大小不能超过5MB',
              icon: 'none'
            });
            return;
          }
          this.uploadFile(tempFilePath);
        },
        fail: (err) => {
          console.log('选择图片失败', err);
        }
      });
    },

    // 移除图片
    removeImage() {
      this.selectedImage = '';
      this.imgList = [];
    },

    uploadFile(filePath) {
      let that = this;
      uni.showLoading({
        title: '上传中...',
        mask: true
      });

      fileApi.upload(filePath).then((res) => {
        uni.hideLoading();
        if (res) {
          that.imgList = [{'url': res.data, 'name': ''}];
          uni.showToast({
            title: '图片选择成功',
            icon: 'success'
          });
          that.selectedImage = res.data;
          console.log(that.selectedImage, 'that.selectedImage ')
        }
      }).catch((error) => {
        uni.hideLoading();
        uni.showToast({
          title: '图片上传失败',
          icon: 'none'
        });
        this.selectedImage = '';
      });
    },
    async submitScreenshot() {
      if (!this.selectedImage || this.imgList.length < 1) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }

      if (this.isSubmitting) return; // 防止重复提交
      this.isSubmitting = true;

      uni.showLoading({
        title: '上传中...',
        mask: true
      });

      try {
        const res = await payApi.screenshot({
          image: this.imgList[0].url,
          order_no: this.currentOrder.order_no,
          type: this.player_order_status == 1 ? 1 : 2
        });
        uni.hideLoading();
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        });
        await this.closeUploadPopup();
        if (this.player_order_status == 1) {
          this.player_order_status = 1
          this.isActiveList = 1
        } else if (this.player_order_status == 2) {
          this.player_order_status = 3
          this.isActiveList = 3
        }
        this.$nextTick(() => {
          this.orderSee(this.isActive);
        })
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: error.message || '上传失败',
          icon: 'none'
        });
      } finally {
        this.isSubmitting = false;
      }
    },
    async goUrl(data, index, type) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 500)
      } else {
        switch (index) {
          case 1:
            if (type == 'abnormal') {
              // 显示输入原因的弹窗
              this.showReasonModal(data);
            } else {
              // 开始服务
              if (data.start_proof_images) {
                try {
                  let res = await payApi.handStart({
                    order_no: data.order_no
                  })
                  this.player_order_status = 2
                  this.isActiveList = 2
                  this.$nextTick(() => {
                    this.orderSee(this.isActive);
                  })
                } catch (error) {
                  uni.showToast({
                    title: error.msg,
                    icon: 'none'
                  })
                }
              } else {
                this.uploadScreenshot(data);
              }
            }
            break;
          case 2:
            // 上传截图
            this.uploadScreenshot(data);
            break;
          case 8:
            try {
              let res = await fileApi.handCancelAbnormal({
                order_no: data.order_no
              })
              this.player_order_status = 1
              this.isActiveList = 1
              this.$nextTick(() => {
                this.orderSee(this.isActive);
              })
            } catch (error) {
              uni.showToast({
                title: error.msg,
                icon: 'none'
              })
            }
            break;
        }

        // if (data.proof_images) {
        //   try {
        //     let res = await payApi.handPlayer({
        //       order_no: data.order_no
        //     })
        //     await this.orderSee(this.isActive)
        //     uni.showToast({
        //       title:'服务已完成',
        //       icon: 'success'
        //     })
        //   } catch (error) {
        //     uni.showToast({
        //       title: error.msg,
        //       icon: 'none'
        //     })
        //   }
        // }else {
        //   this.uploadScreenshot(data);
        // }

      }
    },
    showReasonModal(order) {
      this.currentAbnormalOrder = order;
      this.abnormalReason = '';
      this.isReasonModalVisible = true;
    },
    async submitAbnormal() {
      if (!this.abnormalReason.trim()) {
        uni.showToast({
          title: '请输入异常原因',
          icon: 'none'
        });
        return;
      }
      try {
        let res = await fileApi.handAbnormal({
          order_no: this.currentAbnormalOrder.order_no,
          reason: this.abnormalReason
        });

        this.isReasonModalVisible = false;
        this.player_order_status = 8
        this.isActiveList = 8
        this.$nextTick(() => {
          this.orderSee(this.isActive);
        })
      } catch (error) {
        uni.showToast({
          title: error.msg,
          icon: 'none'
        });
      }
    },
    cancelReasonModal() {
      this.isReasonModalVisible = false;
      this.currentAbnormalOrder = null;
      this.abnormalReason = '';
    },
    formatField(date) {
      if (!date) return '-';
      return date; // 或使用具体的时间格式化逻辑
    },
    // 上拉加载更多
    async onScrollToLower() {
      console.log('55555')
      console.log(this.loadingType, 'this.loadingType')
      // 如果正在加载或没有更多数据，则不执行加载更多
      if (this.loadingType !== 0) return;

      this.page++;
      await this.orderSee(this.isActive);
    },
    // 下拉刷新处理
    async onRefresh() {
      if (this.refreshing) return;

      this.refreshing = true;
      this.loadingType = 1; // 设置加载状态
      this.list = [];
      this.page = 1;
      try {
        await this.orderSee(this.isActive);
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.refreshing = false;
        if (this.list.length === 0) {
          this.loadingType = 2; // 确保无数据时显示正确状态
        }
      }
    },
    // 重新加载数据方法
    async reloadData() {
      try {
        await this.orderSee(this.isActive);
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    },
    onSearch() {
      this.page = 1
      this.list = [] // 搜索时清空列表
      this.orderSee(this.isActive);
    },
    clearSearch() {
      this.order_no = '';
      this.page = 1;
      this.list = [];
      // 清除搜索后自动刷新列表
      this.orderSee(this.isActive);
    },

  }
}
</script>
<style scoped>
.bg000 {
  background: rgba(5, 119, 46, 0.2);
}

.searchBox {
  position: relative;
  width: 100%;
}

.searchBox input {
  height: 56rpx;
  line-height: 56rpx;
}

.searchBox .first-child {
  position: absolute;
  left: 13rpx;
  top: 12rpx;
}

.line {
  border-bottom: 2rpx solid #EEEEEE;
}

.btn {
  border: 2rpx solid #dcdcdc;
  color: #666;
}

.btn:hover .btn:active {
  background-color: #0df297;
}

.active {
  position: relative;
  color: #0df297;
  font-weight: 600;
  text-shadow: 0 0 4rpx rgba(79, 81, 81, 0.6),
  0 0 8rpx rgba(49, 51, 50, 0.4);
}

.active::after {
  content: "";
  position: absolute;
  width: 50rpx; /* 固定宽度，可根据需要调整 */
  height: 4rpx;
  background-color: #0df297;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%); /* 水平居中 */
}

.nav {
  align-items: center;
}


.tab-scroll_box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;

}

.tab-scroll_item {
  line-height: 60rpx;
  flex-shrink: 0;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  padding-top: 10px;
}


.nav_item .img {
  width: 120rpx;
  height: 120rpx;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.upload-popup {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  width: 600rpx;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #eee;
  flex-shrink: 0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
  cursor: pointer;
}

.popup-close:hover {
  color: #666;
}

.popup-body {
  flex: 1;
  overflow-y: auto;
  min-height: 300rpx;
}

.upload-area {
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  padding: 20rpx;
  background-color: #fafafa;
  text-align: center;
  cursor: pointer;
  min-height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 80rpx;
  color: #ccc;
  margin-bottom: 20rpx;
}

.upload-text {
  color: #999;
  font-size: 28rpx;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 300rpx;
}

.preview-image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  object-fit: contain;
  background-color: #f5f5f5;
}

.remove-image {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: #ff4d4f;
  border-radius: 50%;
  color: white;
  font-size: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.order-info {
  display: flex;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.info-label {
  color: #666;
  margin-right: 10rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  font-weight: bold;
  word-break: break-all;
  flex: 1;
}

.tips {
  margin-top: 20rpx;
  padding: 15rpx;
  background-color: #d0ffee;
  border-radius: 8rpx;
  border-left: 6rpx solid #0df297;
}

.tips-text {
  color: #666;
  font-size: 24rpx;
}

.popup-footer {
  display: flex;
  flex-shrink: 0;
}

.popup-footer button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border: none;
  outline: none;
  background: none;
  font-size: 30rpx;
  cursor: pointer;
}

.btn-cancel {
  color: #666;
  border-right: 2rpx solid #eee;
}

.btn-cancel:hover {
  background-color: #f8f9fa;
}

.btn-confirm {
  color: #0df297;
  font-weight: bold;
}

.clear-icon {
  position: absolute;
  right: 13rpx;
  top: 12rpx;
  z-index: 999;
}

.btn-confirm:disabled {
  color: #ccc;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.btn-confirm:hover:not(:disabled) {
  background-color: #e6f7ff;
}

.wmBtnBg {
  background-color: #464646;
  color: #fff;
}

.reason-modal {
  background-color: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  max-width: 90vw;
  animation: popupFadeIn 0.3s ease;
}

.modal-header {
  padding: 30rpx 20rpx 20rpx;
  text-align: center;
  border-bottom: 2rpx solid #eee;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-body {
  padding: 20rpx;
}

.reason-input {
  width: 100%;
  height: 200rpx;
  padding: 15rpx;
  border: 2rpx solid #eee;
  border-radius: 10rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  resize: none;
}

.char-count {
  text-align: right;
  color: #999;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.modal-footer {
  display: flex;
}

.modal-footer button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border: none;
  outline: none;
  background: none;
  font-size: 30rpx;
  cursor: pointer;
}

.scroll-area {
  height: calc(100vh - 280rpx);
}

</style>